<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/commons.jsp" %>
<html>
	<head>
		<title>修改头像</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${ctx }/css/uploadify.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="${ctx }/css/jquery.Jcrop.css" media="screen" />
		<script type="text/javascript" src="${ctx }/js/jquery.js"></script>
		<script type="text/javascript" src="${ctx }/js/weibo.js"></script>
		<script type="text/javascript" src="${ctx }/js/swfobject.js"></script>
		<script type="text/javascript" src="${ctx }/js/jquery.uploadify.v2.1.4.js"></script>
		<script type="text/javascript" src="${ctx }/js/jquery.Jcrop.js"></script>
		<script language="Javascript">
			//修改头像
			$(function(){
				var ctx = $("#ctx").attr("title");
				$("#avatar_cancel").click(function(){
					//刷新页面，有待改进
					window.location.reload();
				});
				function gohome(){
					window.location=ctx+"/home";
				}
				$("#avatar").uploadify({
					'uploader'       : ctx+'/swf/uploadify.swf',
					'script'         : ctx+'/upload',
					'cancelImg'      : ctx+'/images/cancel.png',
					'fileDataName'	 :"avatar", //和input的name属性值保持一致，Struts2就能处理了   
					'folder'         : 'uploads',
					'queueID'        : 'fileQueue',
					'auto'           : true,
					'multi'          : false,
					'fileExt': '*.jpg;*.gif;*.png',
					'fileDesc': 'Image Files (.JPG, .GIF, .PNG)',
					'simUploadLimit' : 2,
					'removeCompleted': true,
					'buttonText'     : escape('单张图片'),     
					'sizeLimit'   : 1048576,
					'onInit'		 : function() {
				    },
				    'onSelectOnce' 	 : function(event,data) {
				    },
				    'onError' 	 : function(event) {
					    alert("上传失败！");
				    },
					'onComplete'     : function(event, queueId, fileObj, response, data){
				    	$("#avatar_file").toggle();
						var jsondata =jQuery.parseJSON(response);
						$("img#target").attr("src", ctx+"/upload_avatar/"+jsondata.newname);
						$("img#preview").attr("src", ctx+"/upload_avatar/"+jsondata.newname);
						$("img#target").attr("title", jsondata.newname);
						$.getScript(ctx+"/js/avatar.js");//动态加载JS，否则不能裁剪
					}  
				});			
				$("#avatar_submit").click(function(e) {  
				    e.preventDefault();  
				    var form = $("#avatar_form");  
				    $.ajax({  
				        url: ctx+"/crop",  
				        type: "post",  
				        data: {"x":$("#x").val(), "y":$("#y").val(), "w":$("#w").val(), "h":$("#h").val(), "f":$("#f").val()},  
				        success: function(data) {
					        var jsondata = jQuery.parseJSON(data);
				            if (jsondata.result == "success") {  
					           alert("保存成功");
					           gohome();
				            } else {  
				                alert("保存失败");  
				            }  
				        }  
				    });  
				}); 
			});
		</script>
	</head>
	<body>
		<span id="ctx" title="${ctx }"></span>
		<c:if test="${sessionScope.user eq null}">
			<c:redirect url="/index.jsp" />
		</c:if>
		<div id="wrap">
			<div id="global_header">
				<div class="content">
					<a href="${ctx }/${sessionScope.user.id }">首页</a>
					<a href="${ctx }/${sessionScope.user.id }/profile">我的微博</a>
					<a href="${ctx }/settings/avatar">设置头像</a>
					<a href="${ctx }/logout">退出</a>
					<input class="search_input" type="text" />
					<a id="search_btn" href="javascript:;">搜索</a>
				</div>
			</div>
			<div id="container">
				<div id="main">
					<div id="content">
						<div id="left">
							<div class="avatar">
								<img id="avatar_image" src="${ctx }/avatar/${sessionScope.user.avatar }" width="50" />${sessionScope.user.nick }
							</div>
						</div>
						<div id="center">
							<p>修改头像</p>
							<hr />
							<div id="avatar_wrap">
								<div id="avatar_file">
									<input type="file" id="avatar" name="avatar" />
								</div>
								<div class="avatar_crop">
									<img id="target" src="" alt="" title=""/>
								</div>
								<div class="avatar_preview">
									<img id="preview" src="${ctx }/avatar/${sessionScope.user.avatar }" alt="" />
								</div>
								<div class="clear"></div>
								<div id="fileQueue"></div>
								<div>
									<a id="avatar_submit" href="javascript:;">保存</a>
									<a id="avatar_cancel" href="javascript:;">取消</a>
								</div>
							</div>
							<form id="avatar_form" action="${ctx }/crop" method="post">  
					            <input type="hidden" id="x" name="x" />  
					            <input type="hidden" id="y" name="y" />  
					            <input type="hidden" id="w" name="w" />  
					            <input type="hidden" id="h" name="h" />  
					            <input type="hidden" id="f" name="f" />  
					        </form> 
						</div>
						<div id="right">
							right...
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div id="global_footer">
				footer... 
			</div>
		</div>
	</body>
</html>
